<template>
  <common :show-search="false" title="市场行情（单位：RMB）">
    <div class="quotPage">
    <el-table
        border
        height="380"
        ref="marketSingleTable"
        :data="quotDataList"
        highlight-current-row
        @row-click="handleCurrentChange"
        @row-contextmenu="rightCatchEvent"
      >
        <el-table-column
          prop="marketDataNo"
          label="编号"
        >
          <template slot-scope="scope" >
            <num-cell :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          prop="mainProductName"
          label="产品"
        >
          <template slot-scope="scope">
            <product-cell :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          prop="mainStandard"
          label="主标准"
        >
        </el-table-column>
        <el-table-column
          prop="marketPrice"
          label="市价"
        >
          <template slot-scope="scope">
            <price-cell :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          prop="adRatio"
          label="涨跌"
        >
          <template slot-scope="scope">
            <updown-cell :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          prop="discountRate"
          label="建议折率"
        >
          <template slot-scope="scope">
            <rate-cell :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          prop="flowCoefficient"
          label="流通系数"
        >
          <template slot-scope="scope">
            <cccf-cell :row="scope.row" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pc-dailog
      title="添加取消自选项"
      v-if="showMenu"
      @confirm="confirm"
      @cancel="showMenu = false"
      customStyle="width: 250px; height: 90px;"
      cancelText="删除自选项"
      confirmText="添加自选项"
    />
  </common>
</template>
<script>
import Common from './common.vue';
import { mapState } from 'vuex';
import PcDailog from '../../../components/dialog/addSelfItem';
let numCell = {
  template: `<div :style="[textColor]">{{row.marketDataNo}}</div>`,
  props: ['row'],
  computed: {
    textColor () {
      return this.row.isUserConcern ? {color: '#fdfe1f'} : {color: '#fff'};
    }
  }
};
let productCell = {
  template: `<div :style="[textColor]">{{row.mainProductName}}</div>`,
  props: ['row'],
  computed: {
    textColor () {
      return this.row.isUserConcern ? { color: '#fdfe1f' } : { color: '#fff' };
    }
  }
};
let standardCell = {
  template: `<div :style="[selectedColor]">{{this.row.standard}}</div>`,
  props: ['row'],
  data: function () {
    return {
      selectedColor: {
        color: '#fdfe1f'
      }
    };
  }
};
let priceCell = {
  template: `<div :style="{color: rowColor}">{{this.row.marketPrice}}</div>`,
  props: ['row'],
  computed: {
    rowColor () {
      return this.row.adRatioColor;
    }
  }
};
let updownCell = {
  template: `<div :style="{color: this.rowColor}" >{{row.adRatioString}}</div>`,
  props: ['row'],
  computed: {
    rowColor () {
      return this.row.adRatioColor;
    }
  }
};
let rateCell = {
  template: `<div :style="{color: '#e5962e' }">{{this.row.discountRateString || '-- --'}}</div>`,
  props: ['row']
};
let cccfCell = {
  template: `<div :style="{color: '#e5962e'}">{{row.flowCoefficient}}</div>`,
  props: ['row']
};
export default {
  data() {
    return {
      showMenu: false,
      row: null,
      quotDataList: []
    };
  },
  beforeMount () {
    this.requestList();
  },
  beforeUpdate () {
    this.setCurrent(this.quotDataList[0]);
  },
  methods: {
    requestList () {
      let marketId = { id: '' };
      this.reqMarketData(marketId);
    },
    confirm (type) {
        // 提交选项
      let data = {
        marketDataNo: this.row.marketDataNo,
        operateType: type + ''
      };
      this.submitItem(data);
      this.showMenu = false;
    },
    rightCatchEvent (row, event) {
      event.preventDefault();
      this.row = row;
      this.showMenu = true;
    },
    reqMarketData (data) {
      this.ajax({
        type: 'POST',
        url: 'malisk/client/market/marketList',
        data: data,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            this.quotDataList = res.result;
            // this.$store.dispatch('sendMarketList', res.result);
            // this.marketData = res.result;
          } else {
            this.errorTip(res.message);
          }
        }
      });
    },
    setCurrent(row) {
      this.$refs.marketSingleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.setCurrent(val);
    },
    submitItem (data) { // 添加 ，移除自选
      this.ajax({
        type: 'POST',
        url: 'malisk/client/market/userConcern',
        data: data,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            data.operateType === '1' && this.successTip('添加自选成功');
            data.operateType === '2' && this.successTip('删除自选成功');
            this.requestList();
          } else {
            this.errorTip(res.message);
          }
        }
      });
    }
  },
  computed: {
    // ...mapGetters(['marKetSelectRow']),
    ...mapState(['skHomeData'])
    // marketListData () {
    //   return this.skHomeData.skMarketList;
    // }
    // currentRow () {
    //   return this.skHomeData.currentRow;
    //   // console.log(this.skHomeData.currentRow, this.marketData, 'computedmarket')
    //   // if ( this.skHomeData.currentRow.hasOwnProperty('marketDataNo') && this.marketData.length) {
    //   //   let row = this.marketData.find((ele) => this.skHomeData.currentRow.marketDataNo === ele.marketDataNo);
    //   //   return row;
    //   // };
    // }
  },
  watch: {
    quotDataList: {
      // deep: true,
      handler: function () {
        // 当marketList 改变时调用这里
        if (this.skHomeData.currentRow.hasOwnProperty('marketDataNo') && quotDataList.length) {
          let row = quotDataList.find((ele) => this.skHomeData.currentRow.marketDataNo === ele.marketDataNo);
          this.setCurrent(row);
        };
      }
    },
    'skHomeData.currentRow': {
      // deep: true,
      handler: function () {
        // 当在home那边改变currentRow 时调用这里；
        if (this.skHomeData.currentRow.hasOwnProperty('marketDataNo') && quotDataList.length) {
          let row = quotDataList.find((ele) => this.skHomeData.currentRow.marketDataNo === ele.marketDataNo);
          this.setCurrent(row);
        };
      }
    }
  },
  components: {
    Common,
    cccfCell,
    rateCell,
    updownCell,
    priceCell,
    standardCell,
    productCell,
    numCell,
    PcDailog
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.quotPage{
  width: 100%;
  height: 376px;
}
</style>
